<template>
	<div class="maskCenter">
		<div id="box" :class="visible?'open-content':'open-content-hide'" 
		style="position: absolute;margin:auto;top:0;left:0;bottom:0;right:0;height:192px;width:336px;">
			<div class="header" v-movew>
				<span class="title">{{title}}</span>				
				<el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
					<span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
				</el-tooltip>
			</div>
			<div class="body">
				<div class="body-row">
					<span>变量名称:</span>
					<div class="row-content">
						<el-input class="systemInput" v-model="info.name"></el-input>
					</div>
				</div>
				<div class="body-row">
					<span style="margin-right: 14px;">默认值:</span>
					<div class="row-content">
						<el-input class="systemInput" v-model="info.value"></el-input>
					</div>
				</div>
			</div>
			<div class="footer">	
					<el-button @click="okclick" size="mini">确 定</el-button>
        			<el-button @click="hide" size="mini">取 消</el-button>
				<!-- <div class="btnConfirm" style="margin-right: 10px;margin-top: 28px;" @click="okclick">
					<span>确认</span>
				</div>
				<div class="btnConfirm" style="margin-top: 28px;" @click="hide">
					<span>取消</span>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>	
	import movew from '@/directives/winmove'
	import {deepCopy} from '@/utils/public'
	export default {
		directives: { movew},
		name: "winCellVar",
		props:{
			activeVar:{default:null}
		},		
		data() {
			return {
				visible:true,
				tableAttr:null,
				title:'新增变量',	
				info:{name:null,value:null},//name:   value: "20"
			};
		},
		mounted() {	
			if(this.activeVar){
				this.title='编辑变量',	
				this.info = deepCopy(this.activeVar);
			}else{
				
			}
		},
		methods: {
			hide(){
				this.visible = false;
				setTimeout(() => {
					this.$emit("close");
				}, 400);
			},
			okclick(){
				this.visible = false;					
				setTimeout(() => {
					this.$emit("ok",this.info);
				}, 400);
			}
		}	
	};
</script>

<style scoped>
	.mask {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header {
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
		background: var(--win-head-back-color);
		margin: 4px;
		text-align: left;
	}
	.header .title {
		width: calc(100% - 25px);		
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: var(--system-page-topbar-text-color);
		margin-left: 12px;
	}
	.header .close {
		font-size: 12px;
		width: 12px;
		height: 12px;
		margin-right: 9px;
	}

	.body {		
		flex-direction: row;
		width: 100%;
		/* padding: 12px 17px; */
		padding: 0px 17px;
		/* height: calc(100% - 127px);		 */
		color: var(--system-page-topbar-text-color);
	}
	
	/*表单背景宽高设置*/
	.open-content {		
		background: var(--win-page-back-color);		
		box-shadow:0px 10px 20px 0px var(--win-page-shadow-color), 0px -10px 20px 0px var(--win-page-shadow-color);
		border-radius:4px;
		overflow: hidden;
		animation: myscale 0.4s;
	}

	/*表单打开动画*/
	@keyframes myscale {
		0% {
			opacity: 0;
			transform: scale(0.6);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	/*表单关闭样式及动画*/
	.open-content-hide {
		background: var(--win-page-back-color);		
		box-shadow:0px 10px 20px 0px var(--win-page-shadow-color), 0px -10px 20px 0px var(--win-page-shadow-color);
		border-radius:4px;
		overflow: hidden;
		animation: myscalehide 0.4s;
		transform: scale(0.6);
		opacity: 0;
	}

	@keyframes myscalehide {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(0.6);
		}
	}

	@keyframes fadeInLeft {
		0% {
			opacity: 0;
			transform: translateX(-120px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	.body-row{
		display: flex;
		line-height: 32px;
		height: 32px;
		margin-top: 10px;
		width: 100%;
	}	
	.row-content{
		margin-left: 15px;
		width: 227px;
	}
	/*element 输入框样式*/
	>>>.el-input__inner{		
		line-height: 32px;
		height: 32px;
		width: 227px;
		border:1px solid var(--input-border-color);
		border-radius:4px;
		color: var(--input-text-color);
		font-size:14px;
		font-family:Microsoft YaHei;
		font-weight:400;
	}
	/*element 下拉框*/
	>>>.el-input__inner:focus{		
		border:1px solid var(--input-focus-border-color);	
	}
	/*下拉框箭头*/
	>>>.el-select__caret {
		line-height: 32px;
	}
	>>>.el-select{
		width: 227px;
	}	
	/*element 输入框的 focus hover样式*/
	>>>.el-input__inner:focus,
	>>>.el-textarea__inner:focus {
		background: var(--input-focus-back-color);
		border: 1px solid var(--input-focus-border-color);
		border-radius: 4px;
	}
	
	>>>.el-input__inner:hover,
	>>>.el-textarea__inner:hover {
		background: var(--input-hover-back-color);
		border: 1px solid var(--input-focus-border-color);
	}
	>>>.el-textarea__inner{
		color: var(--input-text-color);
		font-size:14px;
		font-family:Microsoft YaHei;
		font-weight:400;
	}
	.footer {
		 padding-right: 20px;
		/*height: 60px;
		line-height: 60px; */
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 20px;
		/* margin-bottom: 20px; */
	}	
	.el-button--mini, .el-button--small{
		border: 1px solid rgb(202, 200, 200);
	}
	
</style>